﻿@{
    ViewBag.Title = "Cache";
    Layout = "~/Views/Shared/_Layout_Administration.cshtml";
}

<div id="main">
    <div class="preloader preloader-page-groups"></div>
    <div class="page-groups hide">
    <div class="row">
        <div class="span1 hide">
            &nbsp;
        </div>
        <div class="span2">
            &nbsp;
        </div>
        <div class="span2">
            &nbsp;
        </div>
        <div class="span2">
            <h3><span>Duration</span></h3>
        </div>
        <div class="span1">
            <h3><span>Etag</span></h3>
        </div>
        <div class="span1">
            <h3><span>Gzip</span></h3>
        </div>
        <div class="span1">
            <h3><span>Enabled</span></h3>
        </div>
        <div class="span2 padding-left-90">
            <h3><span>Policy</span></h3>
        </div>
    </div>
    <ul class="unstyled" data-bind="foreach: cacheTable">
        <li>
            <div class="row">
                <div class="span1 hide">
                    <h3><span data-bind="text: Id"></span></h3>
                </div>
                <div class="span2">
                    <h3><span data-bind="text: Controller"></span></h3>
                </div>
                <div class="span2">
                    <h3><span data-bind="text: Action"></span></h3>
                </div>
                <div class="span2 padding-left-20">
                    <h3><span class="pointer" data-bind="text: Duration, click: function() {  self.selectCacheTable($data); }, visible: $data !== self.selectedCacheTable()"></span>
                        <input type="text" placeholder="in sec" class="input-small" data-bind="value: Duration, visibleAndSelect: $data === self.selectedCacheTable(), event: { blur: function() { self.selectCacheTable(''); } }" /></h3>
                </div>
                <div class="span1 padding-top-10">
                    <span>
                        <input type="checkbox" data-bind="checked: IsEtag" /></span>
                </div>
                <div class="span1 padding-top-10">
                    <span>
                        <input type="checkbox" data-bind="checked: IsGzip" /></span>
                </div>
                <div class="span1 padding-left-15 padding-top-10">
                    <span>
                        <input type="checkbox" data-bind="checked: IsEnabled" /></span>
                </div>
                <div class="span1">
                    <h3>
                        <select data-bind="value: CachePolicy">
                            <option value="null">not set</option>
                            <option value="0">none</option>
                            <option value="1">client</option>
                            <option value="2">server</option>
                            <option value="3">client and server</option>
                        </select></h3>
                </div>
            </div>     
        </li>
    </ul>
        </div>
    <button class="btn" data-bind="click: updatelist">Update cache table list</button>
    <button class="btn btn-success" data-bind="click: save">Save</button>
    <button class="btn btn-warning float-margin-right" data-bind="click: clearcache">Clear all cache</button>  
</div>



@section scripts{

    <script type="text/javascript">

        function CacheTable(data) {
            this.Id = ko.observable(data.Id);
            this.Controller = ko.observable(data.Controller);
            this.Action = ko.observable(data.Action);
            this.Duration = ko.observable(data.Duration);
            this.IsEtag = ko.observable(data.IsEtag);
            this.IsGzip = ko.observable(data.IsGzip);
            this.IsEnabled = ko.observable(data.IsEnabled);
            this.CachePolicy = ko.observable(data.CachePolicy);
        }

        var self;

        function PageGroupListViewModel() {
            self = this;
            self.cacheTable = ko.observableArray([]);

            self.selectedCacheTable = ko.observable();
            self.selectCacheTable = function (cacheTable) {
                this.selectedCacheTable(cacheTable);
            };

            self.save = function () {
                TogglePreloader('.preloader-page-groups', '.page-groups');
                $.ajax("SetCacheTable", {
                    data: ko.toJSON({ cacheTableList: self.cacheTable }),
                    type: "post", contentType: "application/json",
                    success: function (result) { alert(result); TogglePreloader('.preloader-page-groups', '.page-groups'); }
                });
            };
                     
            self.updatelist = function () {
                TogglePreloader('.preloader-page-groups', '.page-groups');
                $.getJSON("UpdateCacheTable", function (allData) {
                    var mappedcacheTable = $.map(allData, function (item) { return new CacheTable(item) });
                    self.cacheTable(mappedcacheTable);

                    TogglePreloader('.preloader-page-groups', '.page-groups');
                });
            };

            self.clearcache = function () {
                TogglePreloader('.preloader-page-groups', '.page-groups');
                $.ajax("ClearCache", {
                    data: ko.toJSON({ string: 'clearcahe' }),
                    type: "post", contentType: "application/json",
                    success: function (result) { alert(result); TogglePreloader('.preloader-page-groups', '.page-groups'); }
                });
            };

            self.loadDataFromServer = function () {
                $.getJSON("GetCacheTable", function (allData) {
                    var mappedcacheTable = $.map(allData, function (item) { return new CacheTable(item) });
                    self.cacheTable(mappedcacheTable);

                    TogglePreloader('.preloader-page-groups', '.page-groups');
                });
            };

            self.loadDataFromServer();

        }

        ko.applyBindings(new PageGroupListViewModel());

    </script>

}